<template>
	<view class="uiwu uiwu-ios uiwu-flex-column uiwu-flex-center">
		<navigator url="/pages/login/outhlogin" hover-class="none" class="outhLogin uiwu-flex-align" :style="{'padding-top': uiwu.statusBar() +'px','height':uiwu.headHeight() + uiwu.statusBar() +'px'}">其他登录</navigator>
		<image src="../../static/logo.png" mode="widthFix" style="width: 220rpx;margin: 50rpx 0 120rpx;"></image>
		<view class="uiwu-button uiwu-flex-center" @tap.stop="tapLogin">
			<image src="/static/wx.png" mode="widthFix"></image>
			<text>微信登录</text>
		</view>
		<view class="uiwu-tips uiwu-flex-center">
			<radio style="transform: scale(0.8);" color="#EF821E" :checked="isRadio" @tap="isRadio = !isRadio" />
			登录即表明同意 <navigator url="/pages/login/agreement">用户协议</navigator> 和 <navigator url="/pages/login/privacy">隐私政策</navigator>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { uiwu } from '@/config/config'
	import { ref , inject } from "vue";
	import { wxLoain } from '@/api/api';
	const socket = inject<any>('socket')
	const isRadio = ref<boolean>(false);
	/**
	 * tapLogin 微信登录
	 */
	const tapLogin = () : void => {
		if(!isRadio.value) return uiwu.toast('请先勾选允许用户协议和隐私政策')
		uni.login({
			provider:'weixin',
			success: async ({authResult:{unionid,openid}}:{authResult:{unionid:string,openid:string}}) : Promise<any> => {
				const { userInfo :{nickName , avatarUrl }} = await getUserInfo()//获取微信基本信息
				const {data:{isbind,token,userInfo:{is_first_login}}} = await wxLoain({
					nickname:nickName,
					unionid,
					avatar:avatarUrl,
					openid
				})
				uni.setStorageSync('token',token)
				uiwu.toast('登录成功')
				socket.send(JSON.stringify({
					type:'userRegister',
					token:token
				}))
				if(is_first_login){
					uni.redirectTo({
						url:'/pages/login/invite'
					})
					return
				}
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})
				},400)
			},
			fail: (err) => {
				uiwu.model({
					title:'登录失败',
					content:JSON.stringify(err)
				})
			}
		})
	}
	/**
	 * getUserInfo 获取微信用户的基本信息
	 */
	const getUserInfo = () : Promise<object> =>{
		return new Promise((resolve,reject)=>{
			uni.getUserInfo({
				provider:'weixin',
				success: (res:object) => {
					resolve(res)
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	}
</script>

<style lang="scss">
	.uiwu{
		width: 100%;
		height: 100vh;
		background: url('../../static/logobg.png') no-repeat 0 0;
		background-size: 100% 100%;
	}
	.outhLogin{
		position: absolute;
		right: 24rpx;
		top: 0;
		font-size: 28rpx;
		font-weight: bold;
		color: #815C51;
	}
	.uiwu-button{
		width: 500rpx;
		height: 96rpx;
		padding-bottom: 11rpx;
		background: url('../../static/wxloginbtn.png') no-repeat 0 0;
		background-size: 100% 100%;
		image{
			width: 48rpx;
			margin-right: 14rpx;
		}
		text{
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 1;
		}
	}
	.uiwu-tips{
		font-size: 24rpx;
		font-weight: 400;
		color: #231815 ;
		margin-top: 36rpx;
		navigator{
			color:#EF821E;
			font-weigth:600;
			margin: 0 8rpx;
		}
	}
</style>
